@import "syntax-variables";

.markdown-preview-enhanced {
  @fg: @syntax-text-color;
  @bg: @syntax-background-color;

  @fg-accent: @syntax-cursor-color;
  @fg-strong: contrast(@bg, darken(@fg, 32%), lighten(@fg, 32%));
  @fg-subtle: contrast(@fg, lighten(@fg, 16%), darken(@fg, 16%));

  @border: contrast(@bg, lighten(@bg, 16%), darken(@bg, 16%));

  @margin: 16px;

  @github-black: #333;
  @github-syntax-background-color: #f7f7f7;
  @github-blockquote-color: #777;


  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
  // font-size: 1.2em;
  font-size: 16px;
  line-height: 1.6;
  color: @fg;
  background-color: @bg;
  overflow: initial;
  margin: 10px 13px 10px 13px;
  padding: 2em;
  box-sizing: border-box;
  word-wrap: break-word;

  &[data-use-github-style] {
    color: @github-black;
    background-color: #fff;
  }

  & > :first-child {
    margin-top: 0;
  }

  &[is="space-pen-div"] {
    width: 100%;
    // height: 100%;
    margin: 0;
    z-index: 999;
    overflow: scroll;
    font-size: 16px;
    display: block;
    position: absolute;

    // &::-webkit-scrollbar {
    //  display: none;
    // }

    &[data-use-github-style] {
      ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 3px rgba(218, 218, 218, 0.6);
        background-color: #f4f4f4;
      }

      ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #ccc;
        border-color: transparent; // rgba(204, 204, 204, 0.9);
      } /* this will style the thumb, ignoring the track */
    }
  }


  // Headings --------------------
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-top: 1em;
    margin-bottom: @margin;
    color: @fg-strong;
  }

  &[data-use-github-style] {
    h1, h2, h3, h4, h5 { color: @github-black; font-weight: 600; }
    h5 { font-size: 1em; }
    h6 { color: @github-blockquote-color; }
  }


  h1 { font-size: 2.25em; font-weight: 300; padding-bottom: 0.3em; border-bottom: 1px solid @border;}
  h2 { font-size: 1.75em; font-weight: 400; padding-bottom: 0.3em; border-bottom: 1px solid @border;}
  h3 { font-size: 1.5em; font-weight: 500; }
  h4 { font-size: 1.25em; font-weight: 600; }
  h5 { font-size: 1.1em; font-weight: 600; }
  h6 { font-size: 1.0em; font-weight: 600; }

  &[data-use-github-style] {
    h1, h2 {
      border-bottom: 1px solid #e7e7e7;
    }
  }

  // Emphasis --------------------

  strong {
    color: @fg-strong;
  }

  &[data-use-github-style] {
    strong { color: @github-black; }
  }

  del {
    color: @fg-subtle;
  }


  // Link --------------------
  a:not([href]) {
    color: inherit;
    text-decoration: none;
  }

  a {
    color: #08c;
    text-decoration: none;
  }

  a:hover {
    color: #0050a3;
    text-decoration: none;
  }


  // Images --------------------
  img {
    max-width: 100%;
  }


  // Paragraph --------------------

  & > p {
    margin-top: 0;
    margin-bottom: @margin;
    word-wrap: break-word;
  }

  // List --------------------

  & > ul,
  & > ol {
    margin-bottom: @margin;
  }

  ul,
  ol {
    padding-left: 2em;

    &.no-list {
      padding: 0;
      list-style-type: none;
    }
  }

  ul ul,
  ul ol,
  ol ol,
  ol ul {
    margin-top: 0;
    margin-bottom: 0;
  }

  li {
    margin-bottom: 0;

    &.task-list-item {
      list-style: none;
    }
  }


  li > p {
    // margin-top: @margin;
    margin-top: 0;
    margin-bottom: 0;
  }

  .task-list-item-checkbox {
    margin: 0 0.2em 0.25em -1.6em;
    vertical-align: middle;

    &:hover {
      cursor: pointer;
    }
  }


  // Blockquotes --------------------

  blockquote {
    margin: @margin 0;
    font-size: inherit;
    padding: 0 15px;
    color: @fg-subtle;
    border-left: 4px solid @border;

    > :first-child {
      margin-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
    }
  }

  &[data-use-github-style] {
    blockquote {
      color: @github-blockquote-color;
      border-left: 4px solid #ddd;
    }
  }


  // HR --------------------
  hr {
    height: 4px;
    margin: @margin*2 0;
    background-color: @border;
    border: 0 none;
  }

  &[data-use-github-style] {
    hr {
      background-color: #e7e7e7;
    }
  }

  // Table --------------------
  table {
    margin: 10px 0 15px 0;
  	border-collapse: collapse;
    border-spacing: 0;

    display: block;
    width: 100%;
    overflow: auto;
    word-break: normal;
    word-break: keep-all;

    th {
      font-weight: bold;
      color: @fg-strong;
    }

    td, th {
    	border: 1px solid @border;
    	padding: 6px 13px;
    }
  }

  &[data-use-github-style] {
    th {
      color: @github-black;
    }
    td, th {
      border: 1px solid #ddd;
    }
  }

  // Definition List
  dl {
    padding: 0;

    dt {
      padding: 0;
      margin-top: 16px;
      font-size: 1em;
      font-style: italic;
      font-weight: bold;
    }

    dd {
      padding: 0 16px;
      margin-bottom: 16px;
    }
  }

  // Code --------------------
  code {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 0.85em !important;
    color: @fg-strong;
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 8%), darken(@syntax-background-color, 6%));

    border-radius: 3px;
    padding: 0.2em 0;

    &::before, &::after {
      letter-spacing: -0.2em;
      content: "\00a0";
    }
  }

  &[data-use-github-style] {
    code {
      background-color: rgba(0, 0, 0, 0.04) !important; // issue 160. <code>
      color: inherit;
    }
  }

  // YIYI add this
  // Code tags within code blocks (<pre>s)
  pre > code {
    padding: 0;
    margin: 0;
    font-size: 0.85em !important;
    word-break: normal;
    white-space: pre;
    background: transparent;
    border: 0;
  }

  .highlight {
    margin-bottom: @margin;
  }

  .highlight pre,
  pre {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
    padding: @margin;
    overflow: auto;
    font-size: 0.85em !important;
    line-height: 1.45;

    color: @fg;
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 4%), darken(@syntax-background-color, 6%));

    border: @border;
    border-radius: 3px;
  }

  .highlight pre {
    margin-bottom: 0;
    word-break: normal;
  }

  pre {
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;

    .section {
      opacity: 1;
    }
  }

  pre code,
  pre tt {
    display: inline;
    max-width: initial;
    padding: 0;
    margin: 0;
    overflow: initial;
    line-height: inherit;
    word-wrap: normal;
    background-color: transparent;
    border: 0;

    &:before,
    &:after {
      content: normal;
    }
  }

  p,
  blockquote,
  ul, ol, dl,
  pre {
    margin-top: 0;
    margin-bottom: @margin;
    // word-wrap: break-word;
  }

  atom-text-editor {
    margin: @margin 0;
    padding: 1em;
    font-size: .92em;
    border-radius: 3px;
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 4%), darken(@syntax-background-color, 4%));
  }


  // KBD --------------------
  kbd {
    color: @fg-strong;
    border: 1px solid @border;
    border-bottom: 2px solid darken(@border, 6%);
    padding: 2px 4px;
    background-color: contrast(@syntax-background-color, lighten(@syntax-background-color, 8%), darken(@syntax-background-color, 6%));
  }

  &[data-use-github-style] {
    kbd {
      color: @github-black;
      background-color: #fcfcfc;
      border: solid 1px #ccc;
      border-bottom-color: #bbb;
      border-radius: 3px;
      box-shadow: inset 0 -1px 0 #bbb;
    }
  }

  .pagebreak, .newpage {
    page-break-before: always;
  }

  @media screen and (min-width: 914px) {
    width: 854px;
    margin:10px auto;
    background: @bg;
  }

  // mobile
  @media screen and (max-width: 400px) {
    font-size: 14px;
  }

  &[data-use-github-style] {
    @media screen and (min-width: 914px) {
      background: #fff;
    }
  }

  // very nice tutorial & intro
  // https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
  @media print{
    background-color: @bg;

    h1, h2, h3, h4, h5, h6 {
      color: @fg-strong;
      page-break-after: avoid;
    }

    blockquote {
      color: @fg-subtle;
    }

    table, pre {
       page-break-inside: avoid;
    }

    table {
      display: table;
    }

    img {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    pre, code {
        word-wrap: break-word;
        white-space: normal;
    }
  }

  &[data-use-github-style] {
    @media print {
      background-color: #fff;

      h1, h2, h3, h4, h5, h6 {
        color: #222;
      }

      blockquote {
        color: @github-blockquote-color;
      }

      pre {
        border: 2px solid #f6f6f6;
      }
    }
  }

  // mermaid:
  .mermaid {
    margin-bottom: @margin;

    .edgePath {
      .path {
        stroke: @fg-strong;
      }

      marker {
        path {
          fill: @fg-strong !important;
          opacity: 1 !important;
        }
      }
    }

    line, marker {
      stroke: @fg-strong !important;
      opacity: 1 !important;
    }

    .messageText {
      fill: @fg-strong;
    }
  }

  &[data-use-github-style] {
    .mermaid {
      .edgePath {
        .path {
          stroke: @github-black;
        }
      }

      marker {
        path {
          fill: @github-black !important;
          opacity: 1 !important;
        }
      }
    }

    line, marker {
      stroke: @github-black !important;
      opacity: 1 !important;
    }

    .messageText {
      fill: @github-black;
    }
  }

  // code chunk
  &[is="space-pen-div"] {
    .code-chunk {
      position: relative;

      .output-div {
        overflow-x: auto;
      }

      pre {
        cursor: text;
      }

      .btn-group {
        position: absolute;
        right: 0;
        top: 0;
        display: none;

        .run-btn, .run-all-btn {
          float: right;
          margin-left: 4px;
          border-radius: 3px;
          font-size: 0.8em;
          color: #eee;
          background-color: #528bff;
          background-image: none;
          border: none;

          &:hover {
            background-color: #4b7fe8;
            cursor: pointer;
          }
        }
      }

      &:hover {
        .btn-group {
          display: block;
        }
      }

      .status {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 0.85em;
        color: inherit;
        padding: 2px 6px;
        background-color: rgba(0, 0, 0, 0.04);
        display: none;
      }

      &.running {
        .btn-group {
          display: none;
        }
        .status {
          display: block;
        }
      }
    }
  }

  &:not([is="space-pen-div"]) {
    .code-chunk {
      .btn-group {
        display: none;
      }
      .status {
        display: none;
      }
    }
  }

  // github syntax theme
  // forked and modified from https://github.com/smlombardi/inspired-github
  .github-syntax-theme {
    // General colors
    @syntax-text-color: #333;
    @syntax-cursor-color: #000000;
    @syntax-selection-color: rgba(178, 215, 255, .4);
    @syntax-background-color: #f7f7f7;

    // Guide colors
    @syntax-wrap-guide-color: #dfdfdf;
    @syntax-indent-guide-color: #dfdfdf;
    @syntax-invisible-character-color: #dfdfdf;

    // For find and replace markers
    @syntax-result-marker-color: #000000;
    @syntax-result-marker-color-selected: #000000;

    // Gutter colors
    @syntax-gutter-text-color: lighten(#000000, 70%);
    @syntax-gutter-text-color-selected: lighten(#000000, 30%);
    @syntax-gutter-background-color: #ffffff;
    @syntax-gutter-background-color-selected: #f5f5f5;

    // For git diff info. i.e. in the gutter
    // These are static and were not extracted from your textmate theme
    @syntax-color-renamed:  #96CBFE;
    @syntax-color-added:    #A8FF60;
    @syntax-color-modified: #E9C062;
    @syntax-color-removed:  #CC6666;



    @dark-blue:             hsl(210, 70%, 45%);
    @light-blue:            hsl(207, 62%, 48%);
    @teal:                  hsl(195, 100%, 40%);
    @purple:                #8567b5;
    @text:                  #000000;
    @burgundy:              #ad1c5d;
    @pink:                  #de68ad;
    @red:                   #b52a1d;
    @green:                 #63a35c;
    @lime:                  #a5d70e;
    @orange:                #ee6a42;
    @gold:                  #b57f00;
    @yellow:                hsl(48, 100%, 47%);

    atom-text-editor, :host {
      background-color: @syntax-background-color;
      color: @syntax-text-color;
    }

    pre {
      background-color: @syntax-background-color;
      color: @syntax-text-color;
    }

    atom-text-editor .gutter, :host .gutter {
      background-color: @syntax-gutter-background-color;
      color: @syntax-gutter-text-color;
    }

    atom-text-editor .gutter .line-number.cursor-line, :host .gutter .line-number.cursor-line {
      background-color: @syntax-gutter-background-color-selected;
      color: @syntax-gutter-text-color-selected;
    }

    atom-text-editor .gutter .line-number.cursor-line-no-selection, :host .gutter .line-number.cursor-line-no-selection {
      color: @syntax-gutter-text-color-selected;
    }

    atom-text-editor .wrap-guide, :host .wrap-guide {
      color: @syntax-wrap-guide-color;
    }

    atom-text-editor .indent-guide, :host .indent-guide {
      color: @syntax-indent-guide-color;
    }

    atom-text-editor .invisible-character, :host .invisible-character {
      color: @syntax-invisible-character-color;
    }

    atom-text-editor .search-results .marker .region, :host .search-results .marker .region {
      background-color: transparent;
      border: @syntax-result-marker-color;
    }

    atom-text-editor .search-results .marker.current-result .region, :host .search-results .marker.current-result .region {
      border: @syntax-result-marker-color-selected;
    }

    atom-text-editor.is-focused .cursor, :host(.is-focused) .cursor {
      border-color: @syntax-cursor-color;
    }

    atom-text-editor.is-focused .selection .region, :host(.is-focused) .selection .region {
      background-color: @syntax-selection-color;
    }

    atom-text-editor.is-focused .line-number.cursor-line-no-selection, atom-text-editor.is-focused .line.cursor-line, :host(.is-focused) .line-number.cursor-line-no-selection, :host(.is-focused) .line.cursor-line {
      background-color: rgba(240, 240, 240,.5);
    }


    .comment, .punctuation.comment {
      color: #b0b0b0;
    }

    .string, .string .constant.character.escape {
      color: @dark-blue;
    }

    .constant.numeric {
      color: @teal;
    }

    .constant.language {
      color: @teal;
    }

    .constant.character, .constant.other.rgb-value {
      color: @teal;
    }

    .constant.numeric.line-number.find-in-files, .constant.numeric.line-number.match.find-in-files {
      color: #abb0b3;
    }

    .entity.other.attribute-name.id.css .punctuation.definition.entity.css {}

    .entity.name.class {
      color: @teal;
    }

    .entity.other.inherited-class {
      color: @teal;
    }

    // to make the = in html tags all the same
    .meta.tag.any.html, .meta.tag.block.any.html {
      color: #abb0b3;
    }

    .entity.name.tag {
      color: @green;
    }

    .entity.name.function {
      color: @purple;
    }


    .entity.other.attribute-name,
    .entity.other.attribute-name .punctuation.definition.entity.scss,
    .entity.other.attribute-name.id.css,
    .entity.other.attribute-name.id.css .punctuation.definition.entity.css,
    .entity.other.attribute-name.class.css .punctuation.definition.entity.css  {
      color: @purple;
    }

    .punctuation.definition.tag.begin.html, .punctuation.definition.tag.end.html, .punctuation.definition.tag.html,  .meta.tag.block.any.html {
      color: @syntax-text-color;
    }


    .keyword.control {
      color: @burgundy;
    }

    .keyword.operator {
      color: @purple;
    }

    .storage {
      color: @burgundy;
    }

    .storage.type {
      color: @burgundy;
      &.function {
      //  font-weight: bold;
      }
    }



    .support.function {
      color: @teal;
    }

    .support.constant {
      color: @teal;
    }

    .support.type, .support.class, .meta.property-name.scss {
      color: @teal;
    }

    .support.other.variable {
      color: @text;
    }

    .invalid, .invalid.illegal {
      color: #f8f8f8;
      background-color: @red;
    }

    .invalid.deprecated {
      color: @red;
      background-color: #ffffff;
    }

    .entity.name.filename.find-in-files {
      color: @text;
    }

    .source.css .punctuation.definition.entity, .punctuation.terminator.rule.scss {
      color: @text;
    }

    .source.css .entity.other.attribute-name.pseudo-class, .source.css .entity.other.attribute-name.pseudo-element {
      color: @burgundy;
    }

    .source.css .meta.value, .source.css .support.constant, .source.css .support.function {
      color: @green;
    }


    .source.scss .entity.other.attribute-name.pseudo-class, .source.scss .entity.other.attribute-name.pseudo-element {
      color: @burgundy;
    }

    .support.constant.property-value, .source.scss .support.function, .meta.property-value.scss {
      color: @green;
    }

    .variable, .source.scss .variable, .variable.interpolation.scss, .source.scss .meta.set.variable  {
      color: @pink;
    }

    .keyword.control.else.scss, .keyword.control.if.scss, .keyword.control.content.scss {
      color: @green;
    }
    .keyword.other.unit {
      color: @burgundy;
    }
    .keyword.other.important {
      color: #eb4535;
    }

    .entity.name.tag.reference.scss {
      color: @gold;
    }

    .entity.name.type.new.js {
      color: @purple;
    }


    .variable.language.js {
      color: @orange;
    }
    .variable.parameter.function {
      color: @gold;
    }

    .source.js .meta.function .entity.name.function, .source.js .entity.name.function .meta.function {
      color: @purple;
    }

    .source.php .entity.name.type.class {
      color: @orange;
    }

    .punctuation.definition.heading.markdown, .punctuation.definition.italic.markdown, .punctuation.definition.bold.markdown, .punctuation.definition.string.begin.markdown, .punctuation.definition.string.end.markdown, .punctuation.definition.metadata.markdown, .punctuation.definition.link.markdown, .punctuation.definition.blockquote.markdown, .punctuation.definition.raw.markdown {
      color: @burgundy;
    }

    .punctuation.section.function.scss {
      color: @green
    }

    .punctuation,
    .meta.method-call, .meta.method {
      color: @syntax-text-color;
    }


    .text.html.markdown .meta.separator {
      color: #b3b3b3;
    }

    .text.html.markdown .markup.heading {
    }

    .text.html.markdown .markup.raw.block {
      color: @text;
    }

    .text.html.markdown .markup.raw.inline {
      color: @text;
    }

    .text.html.markdown .meta.link, .text.html.markdown .meta.image {
      color: #4183c4;
    }

    .text.html.markdown .markup.underline.link, .text.html.markdown .constant.other.reference {
      font-style: italic;
    }

    .text.html.markdown .markup.list {
      color: @orange;
    }

    .text.html.markdown .markup.bold {
      font-weight: bold;
    }

    .text.html.markdown .markup.italic {
      font-style: italic;
    }

    .text.html.markdown .markup.bold .markup.italic {
      font-weight: bold;
      font-style: italic;
    }

    .text.html.markdown .markup.italic .markup.bold {
      font-weight: bold;
      font-style: italic;
    }

    .string.quoted.double.html .invalid.illegal.bad-ampersand.html {
      color: @dark-blue;
      background-color: #ffffff;
    }

    .bracket-matcher .region {
        border-bottom: 1px solid hsla(48, 100%, 47%, .8);
        background-color: hsla(48, 100%, 60%, 0.1);
        z-index: 100;
    }



    // new angular colors

    .meta.tag.template.angular {
      color: @dark-blue;
    }
    .meta.tag.template.angular .punctuation.definition.block.begin.angular,
    .meta.tag.template.angular .punctuation.definition.block.end.angular,
    .meta.tag.template.angular .meta.brace.curly.js  {
      color: @burgundy;
    }
    .entity.other.attribute-name.html.angular,
    .meta.attribute.html.angular {
      color: @purple !important;
    }
  }

  &[data-use-github-syntax-theme] {
    .github-syntax-theme() !important; // this has to be important!!!
  }
}
